import { Tooltip } from '@arco-design/web-react';
import cs from 'classnames';
import { useMemo } from 'react';
import { ExtraColor } from '.';
import styles from './CellExtra.module.scss';

interface IProps {
  /** 放置位置 */
  placement: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
  /** 额外信息展示 */
  children: React.ReactNode;
  /** 额外展示信息颜色 */
  color: ExtraColor;
}

const colorHashMap = {
  blue: '#165DFF',
  red: '#F53F3F',
  green: '#00B42A',
  yellow: '#F77234',
  gray: '#86909C',
};

/**
 * 表格项额外信息
 * @param props
 * @returns
 */
const TableCellExtra = (props: IProps) => {
  const { placement, children, color } = props;
  const cls = useMemo(() => {
    return cs({
      [styles[placement]]: true,
      [styles.cellExtra]: true,
    });
  }, [placement]);

  const css = useMemo(() => ({
    // @ts-ignore
    '--color': colorHashMap[color as keyof typeof colorHashMap] || color,
  } as React.CSSProperties), [color]);

  return (
    <div style={css} className={cls}>
      <Tooltip mini content={children}>
        <div className={styles.extra}>{children}</div>
      </Tooltip>
    </div>
  );
};

export { TableCellExtra };
